<template>
  <div>
    <Modal
      v-model="modal"
      
      scrollable
      :mask="false"
      title="链接编辑器"
      @on-ok="handleSubmit"
    >
      <Form :model="form" label-position="left" :label-width="100">
        <FormItem label="链接名称">
          <Input v-model="form.linkName"></Input>
        </FormItem>
        <FormItem label="链接地址">
          <Input v-model="form.linkSite"></Input>
        </FormItem>
        <FormItem label="链接Logo地址">
          <div class="demo-avatar" style="display: inline-table;">
            <Avatar icon="ios-person" :src="form.linkLogo" />
          </div>
          <Input v-model="form.linkLogo"></Input>
        </FormItem>
        <FormItem label="描述">
          <Input
            v-model="form.describe"
            type="textarea"
            placeholder="Enter something..."
          ></Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import eventbus from '@/eventBus/eventbus'
export default {
  //
  props: {
    transmit_model: {
      default: 0
    }
  },

  // 监听器
  watch: {
    transmit_model: {
      handler() {
        
        this.modal = true
      },

      deep: true
    }
  },

  // 核心数据
  data() {
    return {
      modal: false,
      is_edit_modal: false,
      need_edit_node: null,
      form: {
        linkName: '',
        linkSite: '',
        linkLogo: '',
        describe: ''
      }
    }
  },
  // 方法
  methods: {
    handleSubmit() {
      this.modal = false

      if (this.is_edit_modal) {
        // 编辑模式
        this.need_edit_node.link.describe = this.form.describe
        this.need_edit_node.link.linkLogo = this.form.linkLogo
        this.need_edit_node.link.linkName = this.form.linkName
        this.need_edit_node.link.linkSite = this.form.linkSite
        // 节点的title
        this.need_edit_node.title=this.form.linkName
      } else {
        // 传递该数据到父组件
        this.$emit('ev_formData', this.form)
      }

      this.is_edit_modal = false

      this.form = {
          linkName: '',
          linkSite: '',
          linkLogo: '',
          describe: ''
        }
    }
  },
  //
  created() {
    eventbus.on('need_editLink', (link_node) => {
      // console.log(link_node)
      this.form.describe = link_node.link.describe
      this.form.linkLogo = link_node.link.linkLogo
      this.form.linkName = link_node.link.linkName
      this.form.linkSite = link_node.link.linkSite

      this.need_edit_node = link_node
      this.is_edit_modal = true
    })
  }
}
</script>

<style></style>
